<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToolBall 组件示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #4A90E2;
        }
        
        .demo-section h3 {
            margin-top: 0;
            color: #4A90E2;
        }
        
        button {
            background: #4A90E2;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            transition: background 0.2s;
        }
        
        button:hover {
            background: #357ABD;
        }
        
        .status {
            margin-top: 10px;
            padding: 10px;
            background: #e8f5e8;
            border-radius: 5px;
            border-left: 4px solid #28a745;
        }
        
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 ToolBall 工具球组件演示</h1>
        
        <div class="demo-section">
            <h3>📋 功能说明</h3>
            <p>ToolBall 是一个功能丰富的 JavaScript 组件，提供以下核心功能：</p>
            <ul>
                <li><strong>工具球</strong>：40×40px 圆形，支持拖拽移动，始终吸附在页面右侧</li>
                <li><strong>工具面板</strong>：200px 宽度，支持工具分组显示</li>
                <li><strong>内置工具</strong>：按钮、开关、下拉选择、滑块、文本框五种工具类型</li>
                <li><strong>数据保存</strong>：自动保存工具状态到localStorage，页面刷新后状态保持不变</li>
                <li><strong>样式隔离</strong>：使用 Shadow DOM 实现与主页面的样式隔离</li>
                <li><strong>事件系统</strong>：完整的事件监听和触发机制</li>
            </ul>
        </div>
        
        <div class="demo-section">
            <h3>🎮 交互演示</h3>
            <p>点击右侧的工具球可以打开/关闭工具面板，拖拽工具球可以移动位置。</p>
            <button onclick="addButtonTool()">添加按钮工具</button>
            <button onclick="addSwitchTool()">添加开关工具</button>
            <button onclick="addSelectTool()">添加选择工具</button>
            <button onclick="addSliderTool()">添加滑块工具</button>
            <button onclick="addTextTool()">添加文本框工具</button>
            <button onclick="clearTools()">清空所有工具</button>
        </div>
        
        <div class="demo-section">
            <h3>💾 数据保存演示</h3>
            <p>数据保存功能会自动保存开关、选择、滑块、文本框工具的状态到localStorage。</p>
            <button onclick="showData()">查看当前数据</button>
            <button onclick="clearData()">清除所有数据</button>
            <button onclick="testDataPersistence()">测试数据持久化</button>
        </div>
        
        <div class="demo-section">
            <h3>📊 状态监控</h3>
            <div class="status" id="status">
                工具球已初始化，等待交互...
            </div>
            <div class="log" id="log"></div>
        </div>
        
        <div class="demo-section">
            <h3>💡 使用说明</h3>
            <ol>
                <li>工具球会自动显示在页面右侧</li>
                <li>点击工具球可以打开/关闭工具面板</li>
                <li>拖拽工具球可以移动到任意位置</li>
                <li>松开鼠标后工具球会自动吸附到右侧</li>
                <li>点击页面其他区域可以关闭工具面板</li>
                <li>使用上方按钮可以动态添加不同类型的工具</li>
                <li><strong>数据保存</strong>：开关、选择、滑块、文本框工具的状态会自动保存到localStorage</li>
                <li><strong>数据恢复</strong>：页面刷新后，工具状态会自动恢复到之前的值</li>
                <li><strong>数据隔离</strong>：不同工具球实例的数据完全独立，互不影响</li>
            </ol>
        </div>
    </div>

    <!-- 引入 ToolBall 组件 -->
    <script src="../dist/toolball.min.js"></script>
    
    <script>
        // 使用闭包导出的API
        const { initToolBall } = ToolBallAPI;
        
        // 初始化工具球
        const toolBall = initToolBall({
            ball: {
                name: '工具球',
                id: 'main-toolball',
                theme: 'light'
            },
            panel: {
                width: 250,
                layout: 'list',
                groups: true
            }
        });

        // 日志记录
        function log(message) {
            const logEl = document.getElementById('log');
            const time = new Date().toLocaleTimeString();
            logEl.innerHTML += `[${time}] ${message}\n`;
            logEl.scrollTop = logEl.scrollHeight;
        }

        // 更新状态
        function updateStatus(message) {
            document.getElementById('status').textContent = message;
        }

        // 监听工具球事件
        toolBall.on('show', () => {
            log('工具球显示');
            updateStatus('工具球已显示');
        });

        toolBall.on('hide', () => {
            log('工具球隐藏');
            updateStatus('工具球已隐藏');
        });

        toolBall.on('panel:show', () => {
            log('工具面板打开');
            updateStatus('工具面板已打开');
        });

        toolBall.on('panel:hide', () => {
            log('工具面板关闭');
            updateStatus('工具面板已关闭');
        });

        toolBall.on('tool:added', (tool) => {
            log(`工具已添加: ${tool.name} (${tool.id})`);
            updateStatus(`已添加工具: ${tool.name}`);
        });

        toolBall.on('tool:removed', (toolId) => {
            log(`工具已删除: ${toolId}`);
            updateStatus(`已删除工具: ${toolId}`);
        });

        // 监听数据保存功能事件
        toolBall.on('data:change', (key, value, oldValue) => {
            log(`数据变化: ${key} = ${value} (原值: ${oldValue})`);
        });

        toolBall.on('data:saved', (data) => {
            log(`数据已保存到localStorage: ${JSON.stringify(data)}`);
        });

        toolBall.on('data:loaded', (data) => {
            log(`数据已从localStorage加载: ${JSON.stringify(data)}`);
        });

        toolBall.on('data:cleared', () => {
            log('所有数据已清除');
        });

        // 添加按钮工具
        function addButtonTool() {
            const toolId = 'btn';
            const tool = toolBall.addTool('button', {
                id: toolId,
                name: '测试按钮',
                icon: '🔧',
                group: '常用工具',
                onClick: async () => {
                    log('按钮被点击，执行异步操作...');
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    log('异步操作完成！');
                }
            });
            
            tool.on('click', () => {
                log('按钮点击事件触发');
            });
        }

        // 添加开关工具
        function addSwitchTool() {
            const toolId = 'switch';
            const tool = toolBall.addTool('switch', {
                id: toolId,
                name: '自动保存',
                group: '设置',
                defaultValue: true,
                onChange: (value) => {
                    log(`开关状态变化: ${value ? '开启' : '关闭'}`);
                }
            });
            
            tool.on('change', (value) => {
                log(`开关事件触发: ${value}`);
            });
        }

        // 添加选择工具
        function addSelectTool() {
            const toolId = 'select';
            const tool = toolBall.addTool('select', {
                id: toolId,
                name: '主题选择',
                group: '设置',
                options: [
                    { value: 'light', label: '浅色主题' },
                    { value: 'dark', label: '深色主题' },
                    { value: 'auto', label: '自动主题' }
                ],
                defaultValue: 'light',
                onChange: (value) => {
                    log(`主题切换为: ${value}`);
                }
            });
            
            tool.on('change', (value) => {
                log(`选择事件触发: ${value}`);
            });
        }

        // 添加滑块工具
        function addSliderTool() {
            const toolId = 'slider';
            const tool = toolBall.addTool('slider', {
                id: toolId,
                name: '音量控制',
                group: '设置',
                min: 0,
                max: 100,
                defaultValue: 50,
                onChange: (value) => {
                    log(`音量设置为: ${value}%`);
                }
            });
            
            tool.on('change', (value) => {
                log(`滑块事件触发: ${value}`);
            });
        }

        // 添加文本框工具
        function addTextTool() {
            const toolId = 'text';
            const tool = toolBall.addTool('text', {
                id: toolId,
                name: '用户名',
                group: '设置',
                placeholder: '请输入用户名',
                defaultValue: '',
                maxLength: 50,
                onChange: (value) => {
                    log(`用户名设置为: ${value}`);
                }
            });
            
            tool.on('change', (value) => {
                log(`文本框事件触发: ${value}`);
            });
        }

        // 清空所有工具
        function clearTools() {
            const tools = toolBall.panel.tools;
            const toolIds = Array.from(tools.keys());
            toolIds.forEach(toolId => {
                toolBall.removeTool(toolId);
            });
            log('已清空所有工具');
            updateStatus('已清空所有工具');
        }

        // 数据保存功能演示函数
        function showData() {
            const data = toolBall.getData();
            log(`当前数据: ${JSON.stringify(data, null, 2)}`);
            updateStatus('已显示当前数据');
        }

        function clearData() {
            toolBall.clearData();
            log('已清除所有数据');
            updateStatus('已清除所有数据');
        }

        function testDataPersistence() {
            log('=== 数据持久化测试 ===');
            log('1. 请先添加一些开关、选择、滑块工具');
            log('2. 修改这些工具的值');
            log('3. 刷新页面查看数据是否恢复');
            log('4. 或者点击"查看当前数据"查看保存的数据');
            updateStatus('数据持久化测试说明已显示');
        }

        // 页面加载完成
        log('ToolBall 组件初始化完成');
        updateStatus('ToolBall 组件已就绪，可以开始使用');
    </script>
</body>
</html>
